<template>
  <van-list>
    <div v-if="!(reportInfoCount === 0)">
      <van-cell>
        序号:
        <span>{{paperReportInfo.id}}</span>
      </van-cell>
      <van-cell>
        KKScode:
        <span>{{paperReportInfo.KKScode}}</span>
      </van-cell>
      <van-cell>
        工作描述:
        <span>{{paperReportInfo.description}}</span>
      </van-cell>
      <van-cell>
        厂房位置:
        <span>{{paperReportInfo.location}}</span>
      </van-cell>
      <van-cell>
        完工日期
        <span>{{paperReportInfo.finishTime}}</span>
      </van-cell>
      <van-cell>
        故障描述:
        <van-field type="textarea" :placeholder="paperReportInfo.progress" />
      </van-cell>
      <van-cell>
        故障原因分析:
        <van-field type="textarea" :placeholder="paperReportInfo.progress" />
      </van-cell>
      <van-cell>
        故障措施及结果:
        <van-field type="textarea" :placeholder="paperReportInfo.progress" />
      </van-cell>
      <van-cell class="picker-cell">
        <van-field
          readonly
          clickable
          :label="'工作包状态:'"
          :value="packageState"
          placeholder
          @click="showPickerPackage = true"
        />
      </van-cell>
      <van-cell>
          <van-field
          readonly
          clickable
          :label="'报告接收人:'"
          :value="receiver"
          placeholder
          @click="showPickerPerson = true"
        />
      </van-cell>
      <van-cell>
        <van-field v-model="QDRid" label="编号" placeholder="QDR或其他报告编号" />
      </van-cell>
      <van-button type="primary" @click="submit()">保存</van-button>
    </div>
    <div v-else>
      <loading />
    </div>
    <van-popup v-model="showPickerPackage" position="bottom">
      <van-picker
        show-toolbar
        :columns="packageColumns"
        @cancel="showPickerPackage = false"
        @confirm="onPackageConfirm"
      />
    </van-popup>
    <van-popup v-model="showPickerPerson" position="bottom">
      <van-picker
        show-toolbar
        :columns="personColumns"
        @cancel="showPickerPerson = false"
        @confirm="onPersonConfirm"
      />
    </van-popup>
    <van-popup v-model="showDateBox" position="bottom">
      <van-datetime-picker v-model="currentDate" type="date" />
    </van-popup>
  </van-list>
</template>
<style lang="less" scoped>
/deep/.van-field__label {
  width:120px;
}
.van-cell.van-cell--clickable.van-field {
  padding: 0;
}
.van-cell.van-field {
  padding: 0;
}
</style>
<script>
import loading from "@/components/loading.vue";
import {getPaperReportInfo,postPaperReportInfo,getReceiverList} from "@/api/data"
export default {
  data() {
    return {
      reportId:-1,
      reportIndex:-1,
      paperReportInfo: {},
      currentDate: new Date(),
      packageColumns: ["报告编制","完工报告","承审完报","关闭归档"],
      personColumns:[],
      QDRid:'',
      receiver:"",
      showPickerPackage:false,
      showPickerPerson:false,
      showDateBox:false,
    }
  },
  computed:{
    reportInfoCount:{
      get:function(){
        return Object.keys(this.paperReportInfo).length;
      } 
   },
    packageState:{
      get:function(){
         return this.paperReportInfo.packageState;
      },
      set:function(newValue){
        this.paperReportInfo.packageState = newValue;
      }
    }//报告接收人
  },
  methods: {
    getPaperReportInfo(id){
      getPaperReportInfo(id).then(res=>{
        console.log(res);
        this.paperReportInfo = res.data;
      })
    },
    async getReceiverList(){
      let res = await getReceiverList();
      this.personColumns = res.data;
    },
    submit() {
      console.log(this.reportId);
      let submitData = {
        id:this.reportId,
        faultDescription:this.faultDescription,
        faultAnalysis:this.faultAnalysis,
        faultSolution:this.faultSolution,
        packageState:this.value,//工作包状态
        receiver:this.receiver,
        QDR:this.QDRid
      };
      console.log(submitData);
      postPaperReportInfo(submitData).then(res=>{
        console.log(res);
        if(res && res.success){
          this.$toast(res.msg);
          window.paperReportList.splice(this.reportIndex,1);
          this.$router.go(-1);
        }else{
          this.toast("保存失败")
        }
      });
    },
    onPackageConfirm(value) {
      console.log(value);
      this.packageState = value;
      this.showPickerPackage = false;
    },
    onPersonConfirm(value) {
      console.log(value);
      this.receiver = value;
      this.showPickerPerson = false;
    }
  },
  components: {
    loading
  },
  created(){
    console.log("created");
    this.getReceiverList();
  },
  activated(){
    this.reportIndex =  this.$route.params.index;
    this.reportId = this.$route.params.id;
    this.getPaperReportInfo(this.reportId);    
  },
   deactivated(){
    this.paperReportInfo ={};
    this.faultDescription = "";
    this.faultAnalysis = "";
    this.faultSolution = "";
    this.QDRid = "";
    this.value="";
  },
};
</script>